<template>
  <div class="app-container">
    <div class="filter-container" >
      <addPage/>
      <!--<addPage></addPage>-->
      <moveTo/>
    </div>

    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
      <el-table-column label="id">
        <template slot-scope="scope">
          <span >{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="vue路由">
        <template slot-scope="scope">
          <span >{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column label="重定向地址">
        <template slot-scope="scope">
          <span >{{ scope.row.redirect }}</span>
        </template>
      </el-table-column>
      <el-table-column label="页面">
        <template slot-scope="scope">
          <span >{{ scope.row.name }}</span>
          <el-tag>{{ scope.row.left }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="标题">
        <template slot-scope="scope">
          <span >{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组件">
        <template slot-scope="scope">
          <span >{{ scope.row.component }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span >{{ scope.row.role_name }}</span>
          <el-tag>{{ scope.row.right }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <editPage :row_data="scope.row"/>
          <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.id)"/>
          <!--角色管理-->
          <!--<rolePage :row_data="scope.row" :role   _list="list"/>-->
          <!--<moveTo v-bind:row_data="scope.row" @getLists="getLists"></moveTo>-->
          <!--<rolePage v-bind:row_data="list"></rolePage>-->
        </template>
      </el-table-column>
    </tree-table>

  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import { addPageVisitNum } from '@/utils/addPageVisitNum.js'
import '@/styles/buttonStyle.css'
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'
import { getPage, del } from '@/api/shop_admin_auth/adminPage'
import { getList } from '@/api/shop_admin_auth/shopRole'
import addPage from './addPage'
import editPage from './editPage'
import rolePage from './rolePage'
import moveTo from './moveTo'
import store from '@/store'

export default {
  name: 'CustomTreeTableDemo',
  components: { rolePage, treeTable, addPage, editPage, moveTo },
  data() {
    return {
      func: treeToArray,
      expandAll: true,
      data: [],
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined,
        role: undefined
      },
      args: [null, null, 'left']
    }
  },
  created: function() {
    this.getRoles()
    this.getLists()
    addPageVisitNum(this.$router.currentRoute.fullPath, '权限管理')
  },
  methods: {
    getLists() {
      this.listLoading = true
      getPage(store.getters.token).then(response => {
        this.data = response.data.data
        this.listLoading = false
      })
    },
    getRoles() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
        // console.log(this.list)
      })
    },
    del(id) {
      this.$confirm('操作将会删除该记录,是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        del(store.getters.token, { id: id }).then(res => {
          if (res.data.status) {
            this.$message.success(res.data.msg)
            this.$emit('getLists')
            this.close()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '失败!'
        })
      })
    }
  }
}
</script>
